<template>
  <div>
    <div class="badges">
      <el-badge :value="count.one" class="item">
        <el-button size="small" @click="selectOne()">全部订单</el-button>
      </el-badge>
      <el-badge :value="count.two" class="item">
        <el-button size="small" @click="selectTwo()">待付款</el-button>
      </el-badge>
      <el-badge :value="count.three" class="item">
        <el-button size="small" @click="selectThree()">待发货</el-button>
      </el-badge>
      <el-badge :value="count.four" class="item">
        <el-button size="small" @click="selectFour()">已发货</el-button>
      </el-badge>
      <el-badge :value="count.five" class="item">
        <el-button size="small" @click="selectFive()">已完成</el-button>
      </el-badge>
      <el-badge :value="count.six" class="item">
        <el-button size="small" @click="selectSix()">已关闭</el-button>
      </el-badge>
    </div>

    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <div>
              <i class="el-icon-search"></i> 筛选查询
            </div>
            <div>
              <el-button @click.native="selectResults()">查询结果</el-button>
              <el-button @click.native="advancedSearch()">高级检索</el-button>
            </div>
          </el-header>
          <el-main class="info-main">
            <el-form ref="form" :model="form" label-width="100px">
              <el-form-item class="select-div" label="输入搜索：">
                <el-input placeholder="订单编号" class="input-width" v-model="form.transactionId"></el-input>
              </el-form-item>
              <el-form-item class="select-div" label="收货人：">
                <el-input placeholder="收货人手机号码" class="input-width" v-model="form.receiverMobile"></el-input>
              </el-form-item>
              <el-form-item class="select-div" label="提交时间：">
                <el-date-picker v-model="form.createTime" type="datetime" placeholder="请选择时间"></el-date-picker>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </el-main>

      <el-footer>
        <el-container class="parent-body">
          <el-header class="content-header">
            <div>
              <i class="el-icon-s-fold"></i> 数据列表
            </div>
            <div>
              <el-button @click="dialogVisible04=true">拆分订单</el-button>
              <el-button @click="mergeButton">合并订单</el-button>
              <el-button @click="orderPrint">打印发货单</el-button>
              <el-button @click="bulkShipment">批量发货</el-button>
              <el-button @click="exportOrder">导出订单</el-button>

              <el-select v-model="sort" class="input-width2" placeholder="排列方式">
                <el-option label="提交时间" value="0"></el-option>
                <el-option label="支付方式" value="1"></el-option>
                <el-option label="订单来源 " value="2"></el-option>
                <el-option label="订单状态" value="3"></el-option>
              </el-select>
            </div>
          </el-header>
          <el-main class="info-main padding-style">
            <el-table
              ref="multipleTable"
              @selection-change="handleSelectionChange"
              :data="tableData"
              border
              style="width: 100%;"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="transactionId" label="订单编号" width="130"></el-table-column>
              <el-table-column prop="createTime" label="提交时间" width="160"></el-table-column>
              <el-table-column prop="userName" label="用户账号"></el-table-column>
              <el-table-column prop="totalMoney" label="订单金额">
                <template slot-scope="scope">¥{{ scope.row.totalMoney }}</template>
              </el-table-column>
              <el-table-column prop="payType" label="支付方式">
                <template scope="scope">
                  <p v-if="scope.row.payType==0">货到付款</p>
                  <p v-if="scope.row.payType==1">在线支付</p>
                </template>
              </el-table-column>
              <el-table-column prop="sourceType" label="订单来源">
                <template scope="scope">
                  <p v-if="scope.row.sourceType==1">web</p>
                  <p v-if="scope.row.sourceType==2">app</p>
                  <p v-if="scope.row.sourceType==3">微信公众号</p>
                  <p v-if="scope.row.sourceType==4">微信小程序</p>
                  <p v-if="scope.row.sourceType==5">H5手机页面</p>
                </template>
              </el-table-column>
              <el-table-column prop="orderStatus" label="订单状态">
                <template scope="scope">
                  <p v-if="scope.row.orderStatus==0">待付款</p>
                  <p v-if="scope.row.orderStatus==1">待发货</p>
                  <p v-if="scope.row.orderStatus==2">已发货</p>
                  <p v-if="scope.row.orderStatus==3">已完成</p>
                  <p v-if="scope.row.orderStatus==4">已关闭</p>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleSelect(scope.$index, scope.row)">查看订单</el-button>
                  <el-button size="mini" @click="closeOrderButton(scope.$index, scope.row)">关闭订单</el-button>
                  <el-button size="mini" @click="bulkShipment">订单发货</el-button>
                  <el-button size="mini" @click="orderTracking">订单跟踪</el-button>
                  <el-button size="mini" @click="deleteOrder(scope.$index, scope.row)">删除订单</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
          <el-footer class="info-foot">
            <el-button @click="toggleSelectionCheckbox()" size="small">全选</el-button>
            <el-button size="mini" class="margin-left" @click="closeOrderAll()">关闭订单</el-button>
            <el-button size="mini" @click="deleteOrderAll()">删除订单</el-button>
            <div class="paging-style">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage1"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </div>
          </el-footer>
        </el-container>
      </el-footer>
    </el-container>

    <el-dialog title="合并订单" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="orderMerge" :model="orderMerge" label-width="120px">
        <div class="prompt-info">当两个订单不一致时，合并后的订单信息（如：支付方式、配送方式、活动优惠等）以主订单为准。</div>
        <el-form-item label="主订单：">
          <el-select v-model="orderMerge.mainOrder" placeholder="请选择"></el-select>
        </el-form-item>
        <el-form-item label="从订单：">
          <el-select v-model="orderMerge.fromOrder" placeholder="请选择"></el-select>
        </el-form-item>
        <span class="dialog-footer" style="text-align: right;display: inline-block;width:100%;">
          <el-button @click="onReset">重 置</el-button>
          <el-button type="primary" @click="onMerge">合并</el-button>
        </span>
      </el-form>
    </el-dialog>

    <el-dialog title="高级检索" :visible.sync="dialogVisible03" width="50%" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="120px">
        <div class="search-style">
          <el-form-item label="输入搜索：">
            <el-input class="input-width3" placeholder="订单编号/商品货号" v-model="form.transactionId"></el-input>
          </el-form-item>

          <el-form-item label="订单来源：">
            <el-select class="input-width3" v-model="form.sourceType" placeholder="全部">
              <el-option label="web端订单" value="1"></el-option>
              <el-option label="APP订单" value="2"></el-option>
              <el-option label="微信公众号" value="3"></el-option>
              <el-option label="微信公众号" value="4"></el-option>
              <el-option label="H5手机页面" value="5"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="search-style">
          <el-form-item label="收货人：">
            <el-input class="input-width3" placeholder="收货人姓名/手机号码" v-model="form.receiverMobile"></el-input>
          </el-form-item>

          <el-form-item label="提交时间：">
            <el-date-picker
              class="input-width3"
              v-model="form.createTime"
              type="datetime"
              placeholder="请选择时间"
            ></el-date-picker>
          </el-form-item>
        </div>
        <span class="dialog-footer" style="text-align: right;display: inline-block;width:100%;">
          <el-button @click="searchReset">重 置</el-button>
          <el-button type="primary" @click="retrieve()">开始检索</el-button>
        </span>
      </el-form>
    </el-dialog>

    <el-dialog title="拆分订单" :visible.sync="dialogVisible04" width="50%" :before-close="handleClose">
      <div style="text-align: center;margin-bottom:10px;">
        需要拆分订单：
        <el-input class="input-width3" placeholder="输入订单号" v-model="splitSearchNum"></el-input>
        <el-button type="primary" class="margin-left" @click="splitSearch">查询</el-button>
      </div>
      <div>
        <el-table :data="tableData02" border style="width: 100%">
          <el-table-column prop="name" label="商品名称" width="180px"></el-table-column>
          <el-table-column prop="money" label="价格/货号" width="180px"></el-table-column>
          <el-table-column prop="attribute" label="属性" width="120px"></el-table-column>
          <el-table-column prop="num" label="数量"></el-table-column>
          <el-table-column prop="inventory" label="库存"></el-table-column>
          <el-table-column prop="splitNum" label="拆分数量"></el-table-column>
        </el-table>
      </div>
      <div style="color:#ccc;font-size:12px;text-align: center;margin:10px;">拆分订单时，输入需要拆分的数量即可</div>
      <span class="dialog-footer" style="text-align: right;display: inline-block;width:100%;">
        <el-button @click="splitSearchNum=''">重 置</el-button>
        <el-button type="primary" @click="splitButton">拆 分</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import orderListApi from "@/api/order/orderlist";
export default {
  data() {
    return {
      // 计数
      count: {
        one: "",
        two: "",
        three: "",
        four: "",
        five: "",
        six: ""
      },
      // 开启筛选模式
      selectrue: false,
      // 筛选表单
      form: {
        orderStatus: null,
        transactionId: null,
        receiverMobile: null,
        createTime: null,
        sourceType: null
      },
      orderMerge: {
        mainOrder: "",
        fromOrder: ""
      },
      closeOrder: {
        id: "",
        orderStatus: ""
      },

      splitSearchNum: "",

      multipleSelection: [],
      moreOperation: "",

      // 分页
      pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
      total: 5,
      currentPage1: 1,
      sort: 0,
      dialogVisible: false,
      dialogVisible02: false,
      dialogVisible03: false,
      dialogVisible04: false,

      rules02: {},
      tableData: [],

      updateTable: {
        id: "",
        isDelete: ""
      },
      tableData02: [
        {
          name: "2018 iphoneXsMax128GB",
          money: "价格：¥9599.00 货号：No999999",
          attribute: "尺寸：X  颜色：黑色",
          num: "10",
          inventory: "100",
          splitNum: ""
        },
        {
          name: "2018 iphoneXsMax128GB",
          money: "价格：¥9599.00 货号：No999999",
          attribute: "尺寸：X  颜色：黑色",
          num: "10",
          inventory: "100",
          splitNum: ""
        }
      ]
    };
  },
  watch: {
    // 排序方式改变触发
    sort(val, newval) {
      console.log(val);
      console.log(newval);
      if (this.selectrue == true) {
        this.intDataSelect(
          this.currentPage1,
          this.pageSize,
          val,
          this.form.orderStatus,
          this.form.transactionId,
          this.form.receiverMobile,
          this.form.createTime,
          this.form.sourceType
        );
      } else {
        this.initData(this.currentPage1, this.pageSize, val);
      }
    }
  },
  methods: {
    selectOne() {
      this.$router.go(0);
    },
    selectTwo() {
      this.form.transactionId = null;
      this.form.receiverMobile = null;
      this.form.createTime = null;
      this.form.sourceType = null;

      this.form.orderStatus = 0;
      this.currentPage1 = 1;
      this.pageSize = 2;

      this.intDataSelect(
        this.currentPage1,
        this.pageSize,
        this.sort,
        this.form.orderStatus,
        this.form.transactionId,
        this.form.receiverMobile,
        this.form.createTime,
        this.form.sourceType
      );
    },
    selectThree() {
      this.form.transactionId = null;
      this.form.receiverMobile = null;
      this.form.createTime = null;
      this.form.sourceType = null;
      this.form.orderStatus = 1;
      this.currentPage1 = 1;
      this.pageSize = 2;
      this.intDataSelect(
        this.currentPage1,
        this.pageSize,
        this.sort,
        this.form.orderStatus,
        this.form.transactionId,
        this.form.receiverMobile,
        this.form.createTime,
        this.form.sourceType
      );
    },
    selectFour() {
      this.form.transactionId = null;
      this.form.receiverMobile = null;
      this.form.createTime = null;
      this.form.sourceType = null;
      this.form.orderStatus = 2;
      this.currentPage1 = 1;
      this.pageSize = 2;

      this.intDataSelect(
        this.currentPage1,
        this.pageSize,
        this.sort,
        this.form.orderStatus,
        this.form.transactionId,
        this.form.receiverMobile,
        this.form.createTime,
        this.form.sourceType
      );
    },
    selectFive() {
      this.form.transactionId = null;
      this.form.receiverMobile = null;
      this.form.createTime = null;
      this.form.sourceType = null;
      this.form.orderStatus = 3;
      this.currentPage1 = 1;
      this.pageSize = 2;
      this.intDataSelect(
        this.currentPage1,
        this.pageSize,
        this.sort,
        this.form.orderStatus,
        this.form.transactionId,
        this.form.receiverMobile,
        this.form.createTime,
        this.form.sourceType
      );
    },
    selectSix() {
      this.form.transactionId = null;
      this.form.receiverMobile = null;
      this.form.createTime = null;
      this.form.sourceType = null;
      this.form.orderStatus = 4;
      this.currentPage1 = 1;
      this.pageSize = 2;
      this.intDataSelect(
        this.currentPage1,
        this.pageSize,
        this.sort,
        this.form.orderStatus,
        this.form.transactionId,
        this.form.receiverMobile,
        this.form.createTime,
        this.form.sourceType
      );
    },
    //
    currentRefresh() {
      this.$router.go(0);
    },
    selectResults() {
      this.currentPage1 = 1;
      this.pageSize = 2;
      console.log(this.form.createTime);
      this.intDataSelect(
        this.currentPage1,
        this.pageSize,
        this.sort,
        this.form.orderStatus,
        this.form.transactionId,
        this.form.receiverMobile,
        this.form.createTime,
        this.form.sourceType
      );
    },
    deleteOrder(index, row) {
      console.log(row);
      this.updateTable.id = row.id;
      this.updateTable.isDelete = 0;
      console.log(this.updateTable);
      orderListApi.updateOne(this.updateTable).then(response => {
        console.log(response);
        this.$router.go(0);
      });
    },
    exportOrder() {
      alert("执行导出订单");
    },
    advancedSearch() {
      this.dialogVisible03 = true;
    },
    closeOrderButton(index, row) {
      console.log(row);
      this.closeOrder.id = row.id;
      this.closeOrder.orderStatus = 4;
      console.log(this.closeOrder);
      orderListApi.updateOne(this.closeOrder).then(response => {
        console.log(response);
        this.$router.go(0);
      });
    },
    // 批量关闭
    closeOrderAll() {
      console.log(this.multipleSelection);
      orderListApi.updateListClose(this.multipleSelection).then(response => {
        console.log(response);
        this.$router.go(0);
      });
    },
    // 批量删除
    deleteOrderAll() {
      console.log(this.multipleSelection);
      orderListApi.deleteList(this.multipleSelection).then(response => {
        console.log(response);
        this.$router.go(0);
      });
    },
    handleAudit(index, row) {
      this.goodsAudit.name = row.name;
      this.dialogVisible = true;
    },
    handleSelect(index, row) {
      //李睿说的，之后在试试
      // let routeData = this.$router.resolve({
      //     name: "lookOrderNoPay",
      //     row: row
      // })
      // window.open(routeData.href, "_blank");
      this.$router.push({
        path: "/order/lookOrderNoPay",
        query: { id: row.id,transactionId:row.transactionId}
      });
    },
    confirm() {
      alert("执行批量操作");
    },
    splitSearch() {
      alert("执行拆分订单查询");
    },
    splitButton() {
      alert("执行拆分...");
    },

    handleSizeChange(val) {
      this.pageSize = val;
      if (this.selectrue == true) {
        this.intDataSelect(
          this.currentPage1,
          this.pageSize,
          this.sort,
          this.form.orderStatus,
          this.form.transactionId,
          this.form.receiverMobile,
          this.form.createTime,
          this.form.sourceType
        );
      } else {
        this.initData(this.currentPage1, this.pageSize, this.sort);
      }
    },
    handleCurrentChange(val) {
      this.currentPage1 = val;
      if (this.selectrue == true) {
        this.intDataSelect(
          this.currentPage1,
          this.pageSize,
          this.sort,
          this.form.orderStatus,
          this.form.transactionId,
          this.form.receiverMobile,
          this.form.createTime,
          this.form.sourceType
        );
      } else {
        this.initData(this.currentPage1, this.pageSize, this.sort);
      }
    },
    bulkShipment() {
      this.$router.replace({ path: "/order/orderBulkShipment" });
    },
    orderTracking() {
      this.$router.replace({ path: "/order/orderTracking" });
    },
    orderPrint() {
   
      this.$router.push({path:"/order/orderPrint",query: {ids: this.multipleSelection}})
      
    },
    retrieve() {
      this.currentPage1 = 1;
      this.pageSize = 2;
      this.intDataSelect(
        this.currentPage1,
        this.pageSize,
        this.sort,
        this.form.orderStatus,
        this.form.transactionId,
        this.form.receiverMobile,
        this.form.createTime,
        this.form.sourceType
      );
      this.dialogVisible03 = false;
    },
    searchReset() {
      this.form.transactionId = null;
      this.form.receiverMobile = null;
      this.form.createTime = null;
      this.form.sourceType = null;
    },
    handleSelectionChange(val) {
      // 因为此方法是在选择改变时调用，所以必须初始化数组 如果不初始化数组 数组将会层层叠加
      this.multipleSelection = [];
      // 为multipleSelection赋值   multipleSelection为id数组
      val.forEach(v => {
        this.multipleSelection[this.multipleSelection.length] = v.id;
      });
    },
    toggleSelectionCheckbox() {
      if (this.tableData) {
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    mergeButton() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      done();
    },
    onReset() {
      this.orderMerge.mainOrder = "";
      this.orderMerge.fromOrder = "";
    },
    onMerge() {
      alert("正在提交中...");
    },
    initData: function(pageNum, pageSize, sort) {
      orderListApi.pageOrder(pageNum, pageSize, sort).then(response => {
        this.tableData = response.data.data.list;
        this.total = response.data.data.total;
        console.log(response);
      });
    },
    intDataSelect(
      pageNum,
      pageSize,
      sort,
      orderStatus,
      transactionId,
      receiverMobile,
      createTime,
      sourceType
    ) {
      if (
        orderStatus != null ||
        transactionId != null ||
        receiverMobile != null ||
        createTime != null ||
        sourceType != null
      ) {
        this.selectrue = true;
      } else {
        this.selectrue = false;
      }
      console.log("筛选模式:" + this.selectrue);
    
    var time=this.parseTime(createTime);

      orderListApi
        .pageSelect(
          pageNum,
          pageSize,
          sort,
          orderStatus,
          transactionId,
          receiverMobile,
          time,
          sourceType
        )
        .then(response => {
          console.log(response);
          this.tableData = response.data.data.list;
          this.total = response.data.data.total;
        });
    },

    // 开启计数

    countData(orderStatus) {
      orderListApi.getAllObjs(orderStatus).then(response => {
        console.log(response);
        if (orderStatus == null) {
          this.count.one = response.data.data;
        }
        if (orderStatus == 0) {
          this.count.two = response.data.data;
        }
        if (orderStatus == 1) {
          this.count.three = response.data.data;
        }
        if (orderStatus == 2) {
          this.count.four = response.data.data;
        }
        if (orderStatus == 3) {
          this.count.five = response.data.data;
        }
        if (orderStatus == 4) {
          this.count.six = response.data.data;
        }
      });
    },

    // 时间转化
    parseTime(str) {
      if ((str + "").indexOf("-") != -1) {
        str = str.replace(new RegExp(/-/gm), "/");
      }

      let d = new Date(str);

      let newDateYear = d.getFullYear();

      let newDateMonth =
        d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;

      let newDateDay =
        d.getDate() + "" < 10 ? "0" + d.getDate() + "" : d.getDate() + "";

      return newDateYear + "-" + newDateMonth + "-" + newDateDay;
    },
  },
  mounted() {
    this.initData(this.currentPage1, this.pageSize, this.sort);
    this.countData(null);
    this.countData(0);
    this.countData(1);
    this.countData(2);
    this.countData(3);
    this.countData(4);
  }
};
</script>

<style scoped>
.badges {
  height: 60px;
  padding: 10px;
}
.common-home,
.content-header {
  border-bottom: 1px solid #e4e4e4;
  position: relative;
}
.common-home > div {
  display: inline-block;
  width: 100px;
  height: 50px;
  vertical-align: top;
  text-align: center;
  line-height: 50px;
  color: #666666;
}
.common-home > .refresh {
  position: absolute;
  right: 10px;
}
.common-home > div > span {
  border: 4px solid #0399fe;
  display: inline-block;
  width: 0px;
  height: 15px;
  vertical-align: middle;
  margin-right: 5px;
  background-color: #0399fe;
}
.parent-body {
  border: 1px solid #e4e4e4;
}
.content-header {
  height: 50px;
  line-height: 50px;
  background-color: #f3f3f3;
  color: #666666;
  position: relative;
  text-align: left;
}
.info-main {
  background-color: #fff;
}

.content-header > div {
  display: inline-block;
}
.content-header > div:last-of-type {
  position: absolute;
  right: 10px;
}
.input-width {
  width: 200px;
}
.select-div {
  display: inline-block;
  width: 300px;
}
.input-width2 {
  width: 120px;
}
.input-width3 {
  width: 220px;
}
.padding-style {
  padding: 0 !important;
}

.info-foot {
  background-color: #fdfdfe;
  height: 60px;
  line-height: 60px;
  position: relative;
}
.paging-style {
  position: absolute;
  right: 10px;
  display: inline-block;
  top: 15px;
}
.margin-left {
  margin-left: 10px;
}
.prompt-info {
  font-size: 12px;
  color: #ccc;
  margin-bottom: 10px;
}
.search-style {
  width: 50%;
  display: inline-block;
}
</style>

